App.require(["canvasTool"], function (canvasTool) {
    var app = App.getCurrent();

    app.defineLayer("str-render-layer", {
        render: function (next) {
            this.initProperty();
            this.data.isChange = true;
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            });
        },
        initProperty: function () {
            var parentCanvas = this.getParentView(), property = this.property;

            property.width = parentCanvas.width;
            property.height = parentCanvas.height;
            property.id = property.id || this.uid;

            this.data.attributeStr = this._createPropertyStr(property);
        },
        init: function () {
            var ratio = window.devicePixelRatio;
            var canvas = this.data.canvas = document.createElement("canvas");
            canvas.width = this.property.width * ratio;
            canvas.height = this.property.height * ratio;
        },
        draw: function () {
            return true;
        },
        _draw: function (ratio) {
            var canvas = this.data.canvas;
            if (canvas && this._getChange()) {
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                var components = this.components;
                for (var i = 0; i < components.length; i++) {
                    var com = components[i];
                    if (typeof com.draw === "function") com.draw(ctx, ratio);
                }
            }
            this.data.isChange = false;
            return canvas;
        },
        dispose: function () {
            this.data.canvas = null;
            this.data.isChange = true;
        },
    })
})